<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.kma.ncpractice2013.dao.UserDAO" %>
<%@ page import="com.kma.ncpractice2013.model.User" %>
<%@ page import="com.kma.ncpractice2013.dao.UserGroupDAO" %>
<%@ page import="com.kma.ncpractice2013.model.UserGroup" %>
<%@ page import="com.kma.ncpractice2013.model.Commission" %>
<%@ page import="com.kma.ncpractice2013.model.Discount" %>
<%
    int minDiscount = Discount.getMinimalDiscount();
    int maxDiscount = Discount.getMaximalDiscount();
    int commission = Commission.getValue();
	int minCommission = Commission.getMinValue();
	int maxCommission = Commission.getMaxValue();
%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template page</title>
<link rel="stylesheet" href="discounts.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
	var minCommission = <% out.print(Commission.getMinValue()); %>;
	var maxCommission = <% out.print(Commission.getMaxValue()); %>;
	const initialCommission = <%= commission %>;
	const initialDiscount =
			<%
				UserGroupDAO dao = new UserGroupDAO();
				UserGroup group = dao.getById(User.Group.ordinaryCustomer.getValue());
				out.print(group.getDiscount());
			%>;
	const initialVIPDiscount =
			<%
				group = dao.getById(User.Group.VIPCustomer.getValue());
				out.print(group.getDiscount());
			%>;
	var discounts = {'#nonVIPSlider':'#nonVIPDiscount', '#VIPSlider':'#VIPDiscount'};

	$(document).ready(function()
	{
		$('#minCommission').text(minCommission);
		$('#maxCommission').text(maxCommission);
		$('#commission').text(initialCommission);
		$('#nonVIPDiscount').text(initialDiscount);
		$('#VIPDiscount').text(initialVIPDiscount);
	
		$.each(discounts,function(slider,discount)
		{
			$(slider).slider({ value: $(discount).text() });
		});
		$('#commissionSlider').slider({ value: $('#commission').text() });
		$.each(discounts,function(slider,discount)
		{
			$(slider).slider({
				min: <%= minDiscount %>,
				max: <%= maxDiscount %>,
				stop: function(event, ui)
				{
					$(discount).text($(slider).slider('values',0));
				},
				slide: function(event, ui)
				{
					$(discount).text($(slider).slider('values',0));
					$('#button').prop('disabled',false);
				}
			});
		});
		$('#commissionSlider').slider({
			min: 3,
			max: 17,
			stop: function(event, ui)
			{
				$('#commission').text($('#commissionSlider').slider('values',0));
			},
			slide: function(event, ui)
			{
				$('#commission').text($('#commissionSlider').slider('values',1));
				$('#button').prop('disabled',false);
			}
		});
	});

	function saveChanges()
	{
		var reply1 = "ha", reply2 = "hi";
		$('#message').stop(true,true);
		//$('#message').hide();
		$.ajax(
		{
			url: 'dashboard',
			type: 'POST',
			async: false,
			data:	{
				action: 'saveDiscounts',
				nonVIPDiscount : $('#nonVIPDiscount').text().trim(),
				VIPDiscount : $('#VIPDiscount').text().trim()
			},
			success: function(data)	{
				reply1 = data;
			}
		});
		$.ajax(
		{
			url: 'dashboard',
			type: 'POST',
			async: false,
			data:	{
				action: 'saveCommission',
				commission : $('#commission').text().trim()
			},
			success: function(data) {
				reply2 = data;
			}
		});
		$('#message').show();
		if (reply1 === "success" && reply2 === "success")
		{
			$('#message').css('color','black');
			$('#message').html("Changes were saved successfully.");
		}
		else
		{
			$('#message').css('color','red');
			$('#message').html("Commission - " + reply1 + ", discounts - " + reply2);
		}
		$('#message').fadeOut(5000);
		$('#button').prop('disabled',true);
	}
</script>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>

<body>

<div id="header-wrapper">
<div id="header" class="container">
	<div id="logo">
    	<h1><a href="#">Accommodation</a></h1>
    </div>
    <%

        String b = (String)session.getAttribute("auth");
        User user = (User)session.getAttribute("user");
            if(b!=null && b.equals("true"))
            {

                out.print("<div id=\"auth\"><form>" +
				"Welcome, <a href='/user/userProfile.jsp'>"+ 
				user.getName() + "</a> | " +
                                  "<a href=\"/logout.jsp\">Log out</a>" +
						  "</form></div>\n");
            }

        else
        out.print("<div id=\"auth\">" +
                                  "<form method=\"post\" action=\"Auth\">"+
                          "        <input size=\"20\" type=\"text\" placeholder=\"e-mail\" name=\"username\">\n" +

                          "        <input size=\"15\" type=\"password\" placeholder=\"password\" name=\"password\">\n" +
                          "        <input type=\"submit\" value=\"Log in\">\n" +
                          "        <a id=\"regist\" href=\"register.jsp\">Register</a>\n" +
                                "</form>"+
						  "        <br clear=\"all\"><a id=\"reset_pass\" href=\"resetPassword.jsp\">Forgot your password?</a>\n" +
                          "    </div>\n");
    %>


</div>
</div>

<div id="menu-wrapper">
<div id="menu" class="container">
<%
	if(b!=null && b.equals("true") && user != null)
	{
		User.AccessLevel accessLevel = user.getAccessLevelId();
		if (accessLevel == User.AccessLevel.administrator)
		{
			out.print("<ul>\n"+
			 "<li class=\"active\"><a href=\"#\">Main page</a></li>\n" + 
			 "<li><a href=\"user/userProfile.jsp\">Profile</a></li>\n" +
			 "<li><a href=\"admin/dashboard.jsp\">Admin's dashboard</a></li>\n" +
				"</ul>\n");
		}
		else if (accessLevel == User.AccessLevel.manager)
		{
			out.print("<ul>\n"+
			 "<li><a href=\"/main_page.jsp\">Main page</a></li>\n" + 
			 "<li><a href=\"/user/userProfile.jsp\">Profile</a></li>\n" +
			 "<li class=\"active\"><a href=\"/manager/discounts.jsp\">Comissions and discounts</a></li>\n" +
			 "<li><a href=\"/manager/promocodes.jsp\">Promo-codes</a></li>\n" +
			 "<li><a href=\"/manager/vipstatus.jsp\">VIP-status</a></li>\n" +
			 "<li><a href=\"/manager/reports.jsp\">Reports</a></li>\n" +
				"</ul>\n");
		}
	}
%>
</div>
</div>

<div id="content-wrapper">
<div id="content" class="container">
	<header>Comission and discount rules</header>
    <ul>
    	<li>Current Agency commission: <span type="text" id="commission"></span>%</li>
        <li>
			<%= minCommission %>%
        	<div id='commissionSlider' class='slider'></div>
        	<%= maxCommission %>%
        </li>
        <li>Current discount for non-VIP users: <span type="text" id="nonVIPDiscount"></span>%</li>
        <li>
			<%= minDiscount %>%
        	<div id='nonVIPSlider' class='slider'></div>
        	<%= maxDiscount %>%
        </li>
        <li>Current discount for VIP users: <span type="text" id="VIPDiscount"></span>%</li>
        <li>
			<%= minDiscount %>%
        	<div id='VIPSlider' class='slider'></div>
        	<%= maxDiscount %>%
        </li>
        <li>
        	<input type='button' id='button' value='Save changes' onclick='saveChanges()' disabled='true'>
            &nbsp;&nbsp;<span type="text" id="message" style="font-weight:bold"></span>
        </li>
    </ul>
</div>
</div>

<div id="copyright-wrapper">
<div id="copyright" class="container">
<p>Copyright (c) 2013. All rights reserved.</p>
</div>
</div>

</body>

</html>
